$(function () {
  // 接口要求的参数变成全局变量
  let params = {
    // 搜索关键词，可以为空，为空返回某类型所有文章
    key: "",
    //文章类型id，可以为空，为空返回所有类型文章
    type: "",
    //文章状态，草稿 ，已发布,为空返回所有状态文章
    state: "",
    page: 1, //当前页，为空返回第1页
    perpage: 10, //每页显示条数，为空默认每页6条
  };
  init();
  getArticleCategory();
  // 1.获取所有的list
  function init() {
    $.ajax({
      url: "http://localhost:8080/api/v1/admin/article/query",
      headers: { Authorization: localStorage.getItem("token") },
      data: params,
      success: function (res) {
        if (res.code === 200) {
          let list = res.data.data;
          let html = template("listTemp", { list });
          $("#list_tbody").html(html);
          let rendercount = res.data.totalCount; //动态获取服务器数据总数
          renderPage(rendercount);
        } else {
          console.log("失败");
          console.log(res);
        }
      },
    });
  }
  // 2.动态渲染分页
  function renderPage(rendercount) {
    layui.use("laypage", function () {
      let laypage = layui.laypage;
      //执行一个laypage实例
      laypage.render({
        limit: 10, //每页显示的条数
        elem: "pager", //注意，这里的 test1 是 ID，不用加 # 号
        count: rendercount, //数据总数，从服务端得到  动态获取页数,
        curr: params.page,
        jump: function (obj, first) {
          //首次不执行
          if (!first) {
            //obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            params.page = obj.curr;
            //   重新渲染页面
            init();
          }
        },
      });
    });
  }
  //  3.获取下拉列表所有分类
  function getArticleCategory() {
    $.ajax({
      url: "http://localhost:8080/api/v1/admin/category/list",
      headers: { Authorization: localStorage.getItem("token") },
      success: function (res) {
        if (res.code === 200) {
          let html = res.data.reduce(
            (html, value) =>
              (html += `<option value=${value.id}>${value.name}</option>`),
            `<option value=''>所有分类</option>`
          );
          $("#selCategory").html(html);
        } else {
          console.log("失败");
          console.log(res);
        }
      },
    });
  }

  // 4 给筛选做点击事件
  $("#btnSearch").on("click", function () {
    // 1. 获取关键词
    params.key = $("#aname").val();
    // 2.获取文章类型
    params.type = $("#selCategory").val();
    //  3.文章的状态
    params.state = $("#selStatus").val();
    //。4 重置页码
    params.page = 1;
    //  5.拼接参数重新发起请求，重新渲染参数
    init();
  });

  // 5.重置做点击事件
  $(".btn-danger").on("click", function () {
    key = $("#aname").val("");
    type = $("#selCategory").val("");
    state = $("#selStatus").val("");
    // 重置所有的文章
    params = {
      // 搜索关键词，可以为空，为空返回某类型所有文章
      key: "",
      //文章类型id，可以为空，为空返回所有类型文章
      type: "",
      //文章状态，草稿 ，已发布,为空返回所有状态文章
      state: "",
      page: 1, //当前页，为空返回第1页
      perpage: 10, //每页显示条数，为空默认每页6条
    };
    // 重新发起请求
    init();
  });
  // 6.给删除做点击事件
  $("#list_tbody").on("click", ".delete", function () {
    let id = $(this).parents("tr").data("id");
    layer.confirm("请问确认是否删除文章？", (index) => {
      $.ajax({
        url: "http://localhost:8080/api/v1/admin/article/delete",
        type: "post",
        headers: { Authorization: localStorage.getItem("token") },
        data: { id },
        success: function (res) {
          if (res.code === 200) {
            // 隐藏模态框
            layer.close(index);
            // 重新发起请求
            init();
          } else {
            console.log("失败");
            console.log(res);
          }
        },
      });
    });
  });
});
